﻿@page "/tree-grid/checkbox-column"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
  <p>  This sample demonstrates the checkbox column selection functionality of TreeGrid. Click on any parent record checkbox then the child record checkboxes will get selected, and the parent record checkbox will get selected while checking all of its child items.</p>  
</SampleDescription>
<ActionDescription>
   <p>The TreeGrid component can be rendered with checkbox on existing column and also this can be enabled by setting the <code>ShowCheckbox</code> property as true in columns API.</p>
   <p> For hierarchy selection between the records, we need to enable the <code>AutoCheckHierarchy</code> property.</p>
   <p>While using TreeGrid in a touch device, you have an option to select the checkboxes by tapping on the checkbox.</p>
   <p>More information on the Checkbox column can be found in this <a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/treegrid/columns/checkbox-column' >Checkbox</a> documentation section. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid Height="380" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" AllowPaging="true" TreeColumnIndex="1" AutoCheckHierarchy="true">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="180" ShowCheckbox="true"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();
    }
}
